<!--在线用户管理-->
<!--created by lx 2023/4/7-->
<template>
  <div class="list-card-container">
    <a-card title="在线用户管理" class="general-card">
      <!-- 查询表单 -->
      <table-search :data-source="SEARCH_FORM" @change="searchOnline" />

      <!-- 表格 -->
      <a-table
        :columns="COLUMNS_ONLINE"
        :data="onlineList"
        row-key="id"
        :loading="loading"
        :scroll="{ x: '1000px' }"
      >
        <!--插槽，操作-->
        <template #operation="{ record }">
          <a-space>
            <a-popconfirm
              content="确定下线该用户吗？"
              type="warning"
              @ok="offline(record)"
            >
              <a-link> 下线 </a-link>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
  import { Message, TableColumnData } from '@arco-design/web-vue';
  import { OnlineRecord } from '@/api/system/model/onlineModel';
  import { queryOnlineRecordTree, offOnlineRecord } from '@/api/system/online';
  import { defineComponent, ref, onMounted } from 'vue';
  import TableSearch from '@/common/components/cac-components/advanced-search/index.vue';

  export default defineComponent({
    components: { TableSearch },
    setup() {
      // 查询表单
      const SEARCH_FORM: any[] = [
        // 传值username，实际服务中使用userCode查询
        { fieldName: 'username', labelText: '在线用户编码', type: 'text' },
        // { fieldName: 'userCode', labelText: '在线用户编码', type: 'text' },
        // { fieldName: 'clientId', labelText: '凭证', type: 'text' },
        // { fieldName: 'grantType', labelText: '授权类型', type: 'text' },
      ];

      const loading = ref<boolean>(false);

      // func: 查询在线用户
      const searchOnline = async (params: OnlineRecord = {}) => {
        loading.value = true;
        try {
          const { data } = await queryOnlineRecordTree(params);
          onlineList.value = data;
        } finally {
          loading.value = false;
        }
      };

      onMounted(() => {
        searchOnline();
      });

      // 表格
      const onlineList = ref<OnlineRecord[]>([]);
      const COLUMNS_ONLINE: TableColumnData[] = [
        {
          title: '序号',
          align: 'center',
          dataIndex: 'index',
          width: 80,
          render: ({ rowIndex }) => rowIndex + 1,
          fixed: 'left',
        },
        {
          title: '在线用户名称',
          dataIndex: 'username',
          width: 120,
          ellipsis: true,
        },
        {
          title: '在线用户工号',
          dataIndex: 'userCode',
          width: 120,
          ellipsis: true,
        },
        {
          title: '用户类型',
          dataIndex: 'userType',
          slotName: 'type',
          width: 90,
        },
        { title: '凭证', dataIndex: 'clientId', width: 90 },
        { title: '授权类型', dataIndex: 'grantType', width: 90 },
        { title: '到期时间', dataIndex: 'expiration', width: 180 },
        {
          title: '操作',
          dataIndex: 'operation',
          slotName: 'operation',
          width: 60,
          align: 'center',
          fixed: 'right',
        },
      ];

      // func: 下线一条记录
      const offline = async (row: OnlineRecord) => {
        try {
          await offOnlineRecord(row.accessToken as string);
          Message.success('操作成功');
        } finally {
          searchOnline();
        }
      };

      return {
        // 查询
        SEARCH_FORM,
        searchOnline,

        // 表格
        COLUMNS_ONLINE,
        onlineList,
        loading,
        offline,
      };
    },
  });
</script>

<style lang="less" scoped>
  .list-card-container {
    padding: 20px;
    // background-color: var(--color-bg-1);
    border-radius: var(--border-radius-default);
  }
</style>
